<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>商品列表</title>
    <!--css style-->
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/font.css">
    <link rel="stylesheet" href="responsive/flexible.css">
    <script src="responsive/flexible.js"></script>
</head>
<body class="list inner_page">
    <header>
        <a href="javascript:void(0)" class="pre_page"></a>
        <a href="index.html" class="home"></a>
        <form action="" class="pro_search">
            <input type="text" placeholder="五金建材">
            <input type="submit" value="">
        </form>


    </header>


    <section class="main">
        <div class="screen_header">
            <div class="container screen_nav">
                <a href="javascript:void(0);" class="active">综合</a>
                <a href="javascript:void(0);">
                    销量
                </a>
                <a href="javascript:void(0);">
                    价格
                    <div class="dir">
                        <span class="desc"></span>
                        <span class="asc active"></span>
                    </div>
                </a>
                <a href="javascript:void(0);">
                    评论数
                    <div class="dir">
                        <span class="desc"></span>
                        <span class="asc"></span>
                    </div>
                </a>
                <a href="javascript:void(0);" class="screen_btn">筛选<img src="img/screen.png" alt="筛选"></a>
            </div>

        </div>

        <div class="pro_list">
            <ul class="container">
                <li>
                    <div class="pic"><a href="javascript:void(0);"><img src="img/pro_img.jpg" alt=""></a></div>
                    <h2><a href="javascript:void(0);">北欧美式壁灯铁艺简约现代灯具楼梯背景墙床头灯过道灯卧室客厅</a></h2>
                    <div class="price"><em>￥<strong>366.00</strong></em></div>
                    <p><img src="img/shop_icon.png" alt=""><a href="javascript:void(0)">宜家家居专营店</a>   3000+评论</p>
                </li>
                <li>
                    <div class="pic"><a href="javascript:void(0);"><img src="img/pro_img.jpg" alt=""></a></div>
                    <h2><a href="javascript:void(0);">北欧美式壁灯铁艺简约现代灯具楼梯背景墙床头灯过道灯卧室客厅</a></h2>
                    <div class="price"><em>￥<strong>366.00</strong></em></div>
                    <p><img src="img/shop_icon.png" alt=""><a href="javascript:void(0)">宜家家居专营店</a>   3000+评论</p>
                </li>
                <li>
                    <div class="pic"><a href="javascript:void(0);"><img src="img/pro_img.jpg" alt=""></a></div>
                    <h2><a href="javascript:void(0);">北欧美式壁灯铁艺简约现代灯具楼梯背景墙床头灯过道灯卧室客厅</a></h2>
                    <div class="price"><em>￥<strong>366.00</strong></em></div>
                    <p><img src="img/shop_icon.png" alt=""><a href="javascript:void(0)">宜家家居专营店</a>   3000+评论</p>
                </li>
                <li>
                    <div class="pic"><a href="javascript:void(0);"><img src="img/pro_img.jpg" alt=""></a></div>
                    <h2><a href="javascript:void(0);">北欧美式壁灯铁艺简约现代灯具楼梯背景墙床头灯过道灯卧室客厅</a></h2>
                    <div class="price"><em>￥<strong>366.00</strong></em></div>
                    <p><img src="img/shop_icon.png" alt=""><a href="javascript:void(0)">宜家家居专营店</a>   3000+评论</p>
                </li>
                <li>
                    <div class="pic"><a href="javascript:void(0);"><img src="img/pro_img.jpg" alt=""></a></div>
                    <h2><a href="javascript:void(0);">北欧美式壁灯铁艺简约现代灯具楼梯背景墙床头灯过道灯卧室客厅</a></h2>
                    <div class="price"><em>￥<strong>366.00</strong></em></div>
                    <p><img src="img/shop_icon.png" alt=""><a href="javascript:void(0)">宜家家居专营店</a>   3000+评论</p>
                </li>
                <div class="clear"></div>
            </ul>

        </div>

        <div class="mask">
            <form class="panel">
                <span>筛选</span>
                <dl>
                    <dt>
                        <h3>分类 <span>全部</span></h3>
                    </dt>
                    <dd>
                        <input type="checkbox" value="" id="class_1" value="dshzhm"><label for="class_1">灯饰照明</label>
                        <input type="checkbox" value="" id="class_2" value="chfwy"><label for="class_2">厨房卫浴</label>
                        <input type="checkbox" value="" id="class_3" value="wjgj"><label for="class_3">五金工具</label>
                        <input type="checkbox" value="" id="class_4" value="dgdl"><label for="class_4">电工电料</label>
                        <input type="checkbox" value="" id="class_5" value="zhshcl"><label for="class_5">装饰材料</label>
                        <input type="checkbox" value="" id="class_6" value="lyhs"><label for="class_6">淋浴花洒</label>
                        <input type="checkbox" value="" id="class_7" value="ddgj"><label for="class_7">电动工具</label>
                        <input type="checkbox" value="" id="class_8" value="bzh"><label for="class_8">壁纸</label>
                        <input type="checkbox" value="" id="class_9" value="db"><label for="class_9">地板</label>
                    </dd>
                    <dt>
                        <h3>价格区间</h3>

                    </dt>
                    <dd>
                        <input type="text" placeholder="最低价">-<input type="text" placeholder="最高价">
                    </dd>
                    <dt>
                        <h3>品牌 <span>全部</span></h3>
                    </dt>
                    <dd>
                        <input type="checkbox" value="" id="brand_1" value="dshzhm"><label for="brand_1">三星（DELL)</label>
                        <input type="checkbox" value="" id="brand_2" value="chfwy"><label for="brand_2">必达智能锁</label>
                        <input type="checkbox" value="" id="brand_3" value="wjgj"><label for="brand_3">欧盛</label>
                        <input type="checkbox" value="" id="brand_4" value="dgdl"><label for="brand_4">嘉柏丽</label>
                        <input type="checkbox" value="" id="brand_5" value="zhshcl"><label for="brand_5">浙江美尔凯龙龙</label>
                        <input type="checkbox" value="" id="brand_6" value="lyhs"><label for="brand_6">一佳厨卫</label>
                    </dd>
                    <dt>
                        <h3>风格 <span>全部</span></h3>
                    </dt>
                    <dd>
                        <input type="checkbox" value="" id="style_1" value="dshzhm"><label for="style_1">简约现代</label>
                        <input type="checkbox" value="" id="style_2" value="chfwy"><label for="style_2">简欧宫廷 </label>
                        <input type="checkbox" value="" id="style_3" value="wjgj"><label for="style_3">欧盛</label>
                        <input type="checkbox" value="" id="style_4" value="dgdl"><label for="style_4">嘉柏丽</label>
                        <input type="checkbox" value="" id="style_5" value="zhshcl"><label for="style_5">浙江美尔凯龙龙</label>
                        <input type="checkbox" value="" id="style_6" value="lyhs"><label for="style_6">一佳厨卫</label>
                    </dd>
                    <dt>
                        <h3>尺寸 <span>全部</span></h3>
                    </dt>
                    <dd>
                        <input type="checkbox" value="" id="size_1" value="dshzhm"><label for="size_1">简约现代</label>
                        <input type="checkbox" value="" id="size_2" value="chfwy"><label for="size_2">简欧宫廷 </label>
                        <input type="checkbox" value="" id="size_3" value="wjgj"><label for="size_3">欧盛</label>
                    </dd>
                    <dt>
                        <h3>材质 <span>全部</span></h3>
                    </dt>
                    <dd></dd>
                </dl>
                <div class="do">
                    <input type="button" value="重置">
                    <input type="submit" value="确定">
                </div>
            </form>
        </div>

    </section>

    <div class="fix_nav">
        <div class="wrapper">
            <ul class="container">
                <li>
                    <a href="javascript:void(0)" class="home active">
                        首页
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0)" class="class">
                        分类
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0)" class="activity_center">
                        活动中心
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0)" class="cart">
                        购物车
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0)" class="mine">
                        我的
                    </a>
                </li>
            </ul>

        </div>

    </div>

</body>
<script src="js/jquery.js"></script>
<script>
    $(function(){
        console.log( $(":input"));
        $(":input").change(function(){
            var $this=$(this);
            var $label=$this.next();
            var $parent=$(this).parents("dd");
            var $span=$parent.prev().find("span");
            if($this.is(":checked")){
                console.log($label);
                if($span.html()=="全部"){
                    $span.addClass("red");
                    $span.selected=true;
                    $span.html($label.html());
                }else{
                    console.log("111");
                    $span.html( $span.html()+","+$label.html());

                }

            }else{
                if($parent.find(":checked").length==0){
                    $span.html("全部");
                    $span.removeClass("red");
                    return;
                }else{
                    $span.html("");
                    var str="";
                    $parent.find(":checked").each(function(index){
                        console.log($(this).next().html());
                        str+=","+$(this).next().html();

                    });

                    $span.html(str.substr(1));
                }

            }
        });
    });
</script>
</html>